<template>
  <view class="test-container">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-content">
        <view class="nav-left" @click="goBack">
          <text class="nav-icon">←</text>
        </view>
        <view class="nav-title">压力承受力测试</view>
        <view class="nav-right"></view>
      </view>
    </view>

    <!-- 测试介绍 -->
    <view class="test-intro" v-if="!testStarted">
      <view class="intro-card">
        <view class="test-icon">💪</view>
        <view class="test-title">压力承受力测试</view>
        <view class="test-subtitle">Stress Tolerance Assessment</view>
        <view class="test-description">
          评估您在面对压力和挑战时的应对能力，了解您的心理韧性和抗压水平。
        </view>
        
        <view class="test-info">
          <view class="info-item">
            <text class="info-label">测试时长</text>
            <text class="info-value">6-10分钟</text>
          </view>
          <view class="info-item">
            <text class="info-label">题目数量</text>
            <text class="info-value">25题</text>
          </view>
          <view class="info-item">
            <text class="info-label">测试类型</text>
            <text class="info-value">压力评估</text>
          </view>
        </view>

        <view class="test-tips">
          <view class="tips-title">📋 测试说明</view>
          <view class="tips-content">
            • 请根据您最近三个月的真实经历作答\n
            • 选择最符合您实际情况的选项\n
            • 考虑您在压力情境下的真实反应\n
            • 测试结果将帮助您了解自己的抗压能力
          </view>
        </view>

        <button class="start-btn" @click="startTest">开始测试</button>
      </view>
    </view>

    <!-- 测试进行中 -->
    <view class="test-progress" v-if="testStarted && !testCompleted">
      <!-- 进度条 -->
      <view class="progress-bar">
        <view class="progress-bg">
          <view class="progress-fill" :style="{width: progressPercent + '%'}"></view>
        </view>
        <text class="progress-text">{{currentQuestion + 1}}/{{questions.length}}</text>
      </view>

      <!-- 题目卡片 -->
      <view class="question-card">
        <view class="question-number">第 {{currentQuestion + 1}} 题</view>
        <view class="question-text">{{questions[currentQuestion].question}}</view>
        
        <view class="options-list">
          <view 
            class="option-item" 
            :class="{selected: selectedAnswer === index}"
            v-for="(option, index) in questions[currentQuestion].options" 
            :key="index"
            @click="selectAnswer(index)"
          >
            <view class="option-radio">
              <view class="radio-dot" v-if="selectedAnswer === index"></view>
            </view>
            <text class="option-text">{{option.text}}</text>
          </view>
        </view>

        <view class="question-actions">
          <button 
            class="prev-btn" 
            @click="prevQuestion" 
            :disabled="currentQuestion === 0"
          >
            上一题
          </button>
          <button 
            class="next-btn" 
            @click="nextQuestion"
            :disabled="selectedAnswer === null"
          >
            {{currentQuestion === questions.length - 1 ? '完成测试' : '下一题'}}
          </button>
        </view>
      </view>
    </view>

    <!-- 测试结果 -->
    <view class="test-result" v-if="testCompleted">
      <view class="result-card">
        <view class="result-header">
          <view class="result-icon">{{resultData.icon}}</view>
          <view class="result-title">{{resultData.title}}</view>
          <view class="result-score">得分：{{totalScore}}/100</view>
        </view>

        <view class="result-level">
          <view class="level-badge" :class="resultData.level">
            {{resultData.levelText}}
          </view>
        </view>

        <view class="result-description">
          <view class="desc-title">📊 结果解读</view>
          <view class="desc-content">{{resultData.description}}</view>
        </view>

        <view class="result-suggestions">
          <view class="suggestions-title">💡 提升建议</view>
          <view class="suggestions-list">
            <view 
              class="suggestion-item" 
              v-for="(suggestion, index) in resultData.suggestions" 
              :key="index"
            >
              • {{suggestion}}
            </view>
          </view>
        </view>

        <view class="result-actions">
          <button class="retake-btn" @click="retakeTest">重新测试</button>
          <button class="save-btn" @click="saveResult">保存结果</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      testStarted: false,
      testCompleted: false,
      currentQuestion: 0,
      selectedAnswer: null,
      answers: [],
      totalScore: 0,
      
      questions: [
        {
          question: "面对突发的工作任务时，我能够保持冷静",
          options: [
            { text: "从不如此", score: 1 },
            { text: "很少如此", score: 2 },
            { text: "有时如此", score: 3 },
            { text: "经常如此", score: 4 }
          ]
        },
        {
          question: "当遇到挫折时，我能够快速调整心态",
          options: [
            { text: "从不如此", score: 1 },
            { text: "很少如此", score: 2 },
            { text: "有时如此", score: 3 },
            { text: "经常如此", score: 4 }
          ]
        },
        {
          question: "我能够在高压环境下保持工作效率",
          options: [
            { text: "从不如此", score: 1 },
            { text: "很少如此", score: 2 },
            { text: "有时如此", score: 3 },
            { text: "经常如此", score: 4 }
          ]
        },
        {
          question: "面对批评时，我能够理性对待",
          options: [
            { text: "从不如此", score: 1 },
            { text: "很少如此", score: 2 },
            { text: "有时如此", score: 3 },
            { text: "经常如此", score: 4 }
          ]
        },
        {
          question: "我相信自己有能力解决大部分问题",
          options: [
            { text: "从不如此", score: 1 },
            { text: "很少如此", score: 2 },
            { text: "有时如此", score: 3 },
            { text: "经常如此", score: 4 }
          ]
        },
        {
          question: "在紧张的情况下，我仍能做出明智的决定",
          options: [
            { text: "从不如此", score: 1 },
            { text: "很少如此", score: 2 },
            { text: "有时如此", score: 3 },
            { text: "经常如此", score: 4 }
          ]
        },
        {
          question: "我能够从失败中学习并继续前进",
          options: [
            { text: "从不如此", score: 1 },
            { text: "很少如此", score: 2 },
            { text: "有时如此", score: 3 },
            { text: "经常如此", score: 4 }
          ]
        },
        {
          question: "面对不确定性时，我不会过度焦虑",
          options: [
            { text: "从不如此", score: 1 },
            { text: "很少如此", score: 2 },
            { text: "有时如此", score: 3 },
            { text: "经常如此", score: 4 }
          ]
        },
        {
          question: "我能够在多任务环境中保持专注",
          options: [
            { text: "从不如此", score: 1 },
            { text: "很少如此", score: 2 },
            { text: "有时如此", score: 3 },
            { text: "经常如此", score: 4 }
          ]
        },
        {
          question: "当计划被打乱时，我能够灵活应对",
          options: [
            { text: "从不如此", score: 1 },
            { text: "很少如此", score: 2 },
            { text: "有时如此", score: 3 },
            { text: "经常如此", score: 4 }
          ]
        },
        {
          question: "我能够在压力下保持积极的态度",
          options: [
            { text: "从不如此", score: 1 },
            { text: "很少如此", score: 2 },
            { text: "有时如此", score: 3 },
            { text: "经常如此", score: 4 }
          ]
        },
        {
          question: "面对冲突时，我能够保持理性沟通",
          options: [
            { text: "从不如此", score: 1 },
            { text: "很少如此", score: 2 },
            { text: "有时如此", score: 3 },
            { text: "经常如此", score: 4 }
          ]
        },
        {
          question: "我能够有效管理自己的时间和优先级",
          options: [
            { text: "从不如此", score: 1 },
            { text: "很少如此", score: 2 },
            { text: "有时如此", score: 3 },
            { text: "经常如此", score: 4 }
          ]
        },
        {
          question: "在困难面前，我不会轻易放弃",
          options: [
            { text: "从不如此", score: 1 },
            { text: "很少如此", score: 2 },
            { text: "有时如此", score: 3 },
            { text: "经常如此", score: 4 }
          ]
        },
        {
          question: "我能够寻求帮助而不感到羞耻",
          options: [
            { text: "从不如此", score: 1 },
            { text: "很少如此", score: 2 },
            { text: "有时如此", score: 3 },
            { text: "经常如此", score: 4 }
          ]
        },
        {
          question: "面对变化时，我能够快速适应",
          options: [
            { text: "从不如此", score: 1 },
            { text: "很少如此", score: 2 },
            { text: "有时如此", score: 3 },
            { text: "经常如此", score: 4 }
          ]
        },
        {
          question: "我能够控制自己的情绪反应",
          options: [
            { text: "从不如此", score: 1 },
            { text: "很少如此", score: 2 },
            { text: "有时如此", score: 3 },
            { text: "经常如此", score: 4 }
          ]
        },
        {
          question: "在压力下，我仍能保持创造性思维",
          options: [
            { text: "从不如此", score: 1 },
            { text: "很少如此", score: 2 },
            { text: "有时如此", score: 3 },
            { text: "经常如此", score: 4 }
          ]
        },
        {
          question: "我能够从他人的反馈中获得成长",
          options: [
            { text: "从不如此", score: 1 },
            { text: "很少如此", score: 2 },
            { text: "有时如此", score: 3 },
            { text: "经常如此", score: 4 }
          ]
        },
        {
          question: "面对挑战时，我会主动寻找解决方案",
          options: [
            { text: "从不如此", score: 1 },
            { text: "很少如此", score: 2 },
            { text: "有时如此", score: 3 },
            { text: "经常如此", score: 4 }
          ]
        },
        {
          question: "我能够在团队压力下保持合作精神",
          options: [
            { text: "从不如此", score: 1 },
            { text: "很少如此", score: 2 },
            { text: "有时如此", score: 3 },
            { text: "经常如此", score: 4 }
          ]
        },
        {
          question: "我能够平衡工作和生活的压力",
          options: [
            { text: "从不如此", score: 1 },
            { text: "很少如此", score: 2 },
            { text: "有时如此", score: 3 },
            { text: "经常如此", score: 4 }
          ]
        },
        {
          question: "面对期限压力时，我能保持质量标准",
          options: [
            { text: "从不如此", score: 1 },
            { text: "很少如此", score: 2 },
            { text: "有时如此", score: 3 },
            { text: "经常如此", score: 4 }
          ]
        },
        {
          question: "我能够从压力中找到成长的机会",
          options: [
            { text: "从不如此", score: 1 },
            { text: "很少如此", score: 2 },
            { text: "有时如此", score: 3 },
            { text: "经常如此", score: 4 }
          ]
        },
        {
          question: "在高压环境中，我仍能保持身心健康",
          options: [
            { text: "从不如此", score: 1 },
            { text: "很少如此", score: 2 },
            { text: "有时如此", score: 3 },
            { text: "经常如此", score: 4 }
          ]
        }
      ]
    }
  },
  
  computed: {
    progressPercent() {
      return ((this.currentQuestion + 1) / this.questions.length) * 100
    },
    
    resultData() {
      if (this.totalScore <= 40) {
        return {
          icon: '🌱',
          title: '压力敏感型',
          level: 'low',
          levelText: '较低抗压能力',
          description: '您目前的压力承受能力相对较低，在面对挑战和压力时容易感到焦虑和不安。这并不意味着您无法应对压力，而是需要更多的支持和技巧来提升抗压能力。',
          suggestions: [
            '学习基础的压力管理技巧，如深呼吸和放松训练',
            '建立规律的作息和运动习惯',
            '寻求朋友、家人或专业人士的支持',
            '将大任务分解为小步骤，逐步完成',
            '培养积极的自我对话和思维模式'
          ]
        }
      } else if (this.totalScore <= 60) {
        return {
          icon: '🌿',
          title: '压力适应型',
          level: 'medium-low',
          levelText: '中等偏低抗压能力',
          description: '您具有一定的压力承受能力，能够应对日常的挑战，但在面对较大压力时可能会感到吃力。通过适当的训练和调整，您可以进一步提升抗压能力。',
          suggestions: [
            '继续练习已有的压力管理技巧',
            '学习时间管理和优先级设定',
            '培养解决问题的系统性思维',
            '建立更强的社会支持网络',
            '定期进行自我反思和调整'
          ]
        }
      } else if (this.totalScore <= 75) {
        return {
          icon: '🌳',
          title: '压力平衡型',
          level: 'medium',
          levelText: '良好抗压能力',
          description: '您具有良好的压力承受能力，能够在大多数情况下保持冷静和理性。您已经掌握了一些有效的应对策略，能够在压力和放松之间找到平衡。',
          suggestions: [
            '继续保持现有的良好应对策略',
            '在高压时期注意自我关怀',
            '帮助他人应对压力，分享经验',
            '探索更高层次的挑战和成长机会',
            '定期评估和优化压力管理方法'
          ]
        }
      } else if (this.totalScore <= 90) {
        return {
          icon: '🏔️',
          title: '压力掌控型',
          level: 'high',
          levelText: '优秀抗压能力',
          description: '您具有优秀的压力承受能力，能够在高压环境中保持出色的表现。您不仅能够有效应对压力，还能从挑战中获得成长和满足感。',
          suggestions: [
            '继续发挥您的抗压优势',
            '成为他人的压力管理导师',
            '寻找更具挑战性的目标和项目',
            '注意避免过度承担责任',
            '保持工作与生活的健康平衡'
          ]
        }
      } else {
        return {
          icon: '⛰️',
          title: '压力大师型',
          level: 'very-high',
          levelText: '卓越抗压能力',
          description: '您拥有卓越的压力承受能力，能够在极具挑战性的环境中保持冷静、理性和高效。您是天生的危机处理者，能够将压力转化为动力和机遇。',
          suggestions: [
            '充分发挥您的领导潜能',
            '在危机管理和高压项目中发挥作用',
            '分享您的经验，帮助组织建立抗压文化',
            '注意预防过度自信和忽视风险',
            '保持持续学习和自我提升的心态'
          ]
        }
      }
    }
  },
  
  methods: {
    goBack() {
      uni.navigateBack()
    },
    
    startTest() {
      this.testStarted = true
      this.currentQuestion = 0
      this.selectedAnswer = null
      this.answers = []
    },
    
    selectAnswer(index) {
      this.selectedAnswer = index
    },
    
    nextQuestion() {
      if (this.selectedAnswer !== null) {
        this.answers[this.currentQuestion] = this.selectedAnswer
        
        if (this.currentQuestion < this.questions.length - 1) {
          this.currentQuestion++
          this.selectedAnswer = this.answers[this.currentQuestion] || null
        } else {
          this.completeTest()
        }
      }
    },
    
    prevQuestion() {
      if (this.currentQuestion > 0) {
        this.currentQuestion--
        this.selectedAnswer = this.answers[this.currentQuestion] || null
      }
    },
    
    completeTest() {
      this.calculateScore()
      this.testCompleted = true
    },
    
    calculateScore() {
      this.totalScore = 0
      this.answers.forEach((answerIndex, questionIndex) => {
        this.totalScore += this.questions[questionIndex].options[answerIndex].score
      })
    },
    
    retakeTest() {
      this.testStarted = false
      this.testCompleted = false
      this.currentQuestion = 0
      this.selectedAnswer = null
      this.answers = []
      this.totalScore = 0
    },
    
    saveResult() {
      const result = {
        testType: 'stress-tolerance',
        testName: '压力承受力测试',
        score: this.totalScore,
        level: this.resultData.levelText,
        date: new Date().toISOString(),
        answers: this.answers
      }
      
      // 保存到本地存储
      let testHistory = uni.getStorageSync('testHistory') || []
      testHistory.unshift(result)
      uni.setStorageSync('testHistory', testHistory)
      
      uni.showToast({
        title: '结果已保存',
        icon: 'success'
      })
      
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    }
  }
}
</script>

<style scoped>
.test-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

/* 导航栏样式 */
.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #f0f0f0;
}

.navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 32rpx;
  padding-top: 44rpx;
}

.nav-left, .nav-right {
  width: 80rpx;
  height: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-icon {
  font-size: 36rpx;
  color: #333;
}

.nav-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

/* 测试介绍样式 */
.test-intro {
  padding: 132rpx 32rpx 32rpx;
}

.intro-card {
  background: white;
  border-radius: 32rpx;
  padding: 48rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.test-icon {
  font-size: 120rpx;
  text-align: center;
  margin-bottom: 24rpx;
}

.test-title {
  font-size: 48rpx;
  font-weight: 700;
  color: #333;
  text-align: center;
  margin-bottom: 12rpx;
}

.test-subtitle {
  font-size: 28rpx;
  color: #666;
  text-align: center;
  margin-bottom: 32rpx;
}

.test-description {
  font-size: 30rpx;
  color: #666;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 40rpx;
}

.test-info {
  background: #f8f9fa;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 32rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-label {
  font-size: 28rpx;
  color: #666;
}

.info-value {
  font-size: 28rpx;
  color: #333;
  font-weight: 600;
}

.test-tips {
  background: #e8f4fd;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 40rpx;
}

.tips-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #1890ff;
  margin-bottom: 16rpx;
}

.tips-content {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
  white-space: pre-line;
}

.start-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-weight: 600;
}

/* 测试进行中样式 */
.test-progress {
  padding: 132rpx 32rpx 32rpx;
}

.progress-bar {
  background: white;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 32rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.progress-bg {
  height: 8rpx;
  background: #f0f0f0;
  border-radius: 4rpx;
  overflow: hidden;
  margin-bottom: 16rpx;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 4rpx;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 24rpx;
  color: #666;
  text-align: center;
  display: block;
}

.question-card {
  background: white;
  border-radius: 32rpx;
  padding: 48rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.question-number {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 16rpx;
}

.question-text {
  font-size: 32rpx;
  color: #333;
  line-height: 1.5;
  margin-bottom: 40rpx;
  font-weight: 500;
}

.options-list {
  margin-bottom: 48rpx;
}

.option-item {
  display: flex;
  align-items: center;
  padding: 24rpx;
  margin-bottom: 16rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  border: 2rpx solid transparent;
  transition: all 0.3s ease;
}

.option-item.selected {
  background: #e8f4fd;
  border-color: #1890ff;
}

.option-radio {
  width: 32rpx;
  height: 32rpx;
  border: 2rpx solid #ddd;
  border-radius: 50%;
  margin-right: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.option-item.selected .option-radio {
  border-color: #1890ff;
}

.radio-dot {
  width: 16rpx;
  height: 16rpx;
  background: #1890ff;
  border-radius: 50%;
}

.option-text {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

.question-actions {
  display: flex;
  gap: 24rpx;
}

.prev-btn, .next-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  border: none;
}

.prev-btn {
  background: #f5f5f5;
  color: #666;
}

.prev-btn:disabled {
  opacity: 0.5;
}

.next-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.next-btn:disabled {
  background: #ddd;
  color: #999;
}

/* 测试结果样式 */
.test-result {
  padding: 132rpx 32rpx 32rpx;
}

.result-card {
  background: white;
  border-radius: 32rpx;
  padding: 48rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.result-header {
  text-align: center;
  margin-bottom: 32rpx;
}

.result-icon {
  font-size: 120rpx;
  margin-bottom: 24rpx;
}

.result-title {
  font-size: 48rpx;
  font-weight: 700;
  color: #333;
  margin-bottom: 16rpx;
}

.result-score {
  font-size: 32rpx;
  color: #666;
}

.result-level {
  text-align: center;
  margin-bottom: 32rpx;
}

.level-badge {
  display: inline-block;
  padding: 12rpx 32rpx;
  border-radius: 32rpx;
  font-size: 24rpx;
  font-weight: 600;
}

.level-badge.low {
  background: #fff2f0;
  color: #f5222d;
}

.level-badge.medium-low {
  background: #fff7e6;
  color: #fa8c16;
}

.level-badge.medium {
  background: #f6ffed;
  color: #52c41a;
}

.level-badge.high {
  background: #e6f7ff;
  color: #1890ff;
}

.level-badge.very-high {
  background: #f9f0ff;
  color: #722ed1;
}

.result-description, .result-suggestions {
  margin-bottom: 32rpx;
}

.desc-title, .suggestions-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 16rpx;
}

.desc-content {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

.suggestions-list {
  font-size: 28rpx;
  color: #666;
  line-height: 1.8;
}

.suggestion-item {
  margin-bottom: 8rpx;
}

.result-actions {
  display: flex;
  gap: 24rpx;
}

.retake-btn, .save-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  border: none;
}

.retake-btn {
  background: #f5f5f5;
  color: #666;
}

.save-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}
</style>